<template>
  <a-card class="distribution relative" :body-style="{ height: '100%', padding: '0' }">
    <div class="flex h-[100%]">
      <TagSelector :tag-code="distributionConfig.tagCode" @select="selectTag"></TagSelector>
      <DistributionCanvas @change-step="changeStep" />
      <div class="flex flex-col h-[100%] overflow-y-auto w-[400px]">
        <div class="p-2">
          <a-segmented
            block
            :options="distributionSelectorOptions"
            v-model:value="current"
          ></a-segmented>
        </div>

        <ProductSelector @select="selectProduct" v-show="current === 'product'"></ProductSelector>
        <TemplateSelector
          v-model:value="distributionConfig.templateId"
          @select="selectTemplate"
          ref="templateRef"
          v-show="current === 'template'"
          :template-id="distributionConfig.templateId"
          :resolution-id="distributionConfig.resolutionId"
        ></TemplateSelector>

        <Screen v-show="current === 'screen'"></Screen>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import DistributionCanvas from './canvas/DistributionCanvas.vue';
import {
  DISTRIBUTE_STEP,
  distributionConfig,
  distributionObj,
  setDistributionStep,
} from './data/data';
import { distributionSelectorOptions } from './data/options';
import Screen from './screen/Screen.vue';
import type { ITemplate } from '@/api/modules/esl/template';
import type { Goods } from '@/api/modules/data/goods';
import type { ITag } from '@/api/modules/esl/priceTag';
import { currentScreen } from './screen/screen';

const templateRef = ref();

const stepMap = ['template', 'product'];
const current = ref('template');

const route = useRoute();
const changeStep = (step: number) => {
  current.value = stepMap[step];
};
const selectTag = (data: ITag) => {
  distributionConfig.value.resolutionId = data.resolutionId;
  distributionConfig.value.tagCode = data.tagCode;
  distributionConfig.value.tagId = data.tagId;
  nextTick(() => {
    templateRef.value?.loadData();
    setDistributionStep({
      index: DISTRIBUTE_STEP.TAG,
      key: 'tagCode',
      value: data.tagCode!,
    });
  });
};
const selectTemplate = (data: ITemplate) => {
  setDistributionStep({
    index: DISTRIBUTE_STEP.TEMPLATE,
    value: data.templateId!,
    key: 'templateId',
  });
};

const selectProduct = (data: Goods) => {
  setDistributionStep({
    index: DISTRIBUTE_STEP.PRODUCT,
    value: data.goodsId,
    key: 'productId',
  });
  currentScreen.value.value = distributionConfig.value.productId;
};
onMounted(() => {
  const { productId, tagCode, templateId, resolutionId } = route.query;
  if (resolutionId) {
    distributionConfig.value.resolutionId = resolutionId + '';
    templateRef.value?.loadData();
  }
  let map = [
    {
      index: DISTRIBUTE_STEP.PRODUCT,
      value: productId,
      key: 'productId',
    },
    {
      index: DISTRIBUTE_STEP.TAG,
      value: tagCode,
      key: 'tagCode',
    },
    {
      index: DISTRIBUTE_STEP.TEMPLATE,
      value: templateId,
      key: 'templateId',
    },
  ];
  map.forEach((e: any) => {
    setDistributionStep(e);
  });
});

onUnmounted(() => {
  distributionConfig.value = { ...distributionObj };
});
</script>

<style lang="scss" scoped>
.distribution {
  height: calc(100vh - 156px);
}

:deep(.ant-tabs, .ant-tabs-content, .ant-tabs-content-holder) {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
:deep(.ant-card) {
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}
</style>
